<script setup name="Person" lang="ts">
import {reactive, toRefs, toRef} from "vue";

// 数据
let person = reactive({
  name: '张三',
  age: 18,
  sex: '男'
})

let {name, age} = toRefs(person)
let sex = toRef(person, 'sex')
console.log(name.value)

// 方法
function changeName() {
  name.value += '~'
  console.log(name.value === person.name)
}

function changeSex() {
  sex.value = '女'
}

function changeAge() {
  age.value += 1
}

function changePerson() {
  Object.assign(person, {name: '王五', age: 22})
}

</script>

<template>
  <div class="person">
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
    <h2>性别：{{ sex }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeSex">修改性别</button>
    <button @click="changePerson">修改信息</button>
  </div>
</template>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px #000;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}

li {
  font-size: 20px;
}
</style>